<!--

    Copyright (c) 2012, Mayocat <hello@mayocat.org>

    This Source Code Form is subject to the terms of the Mozilla Public
    License, v. 2.0. If a copy of the MPL was not distributed with this
    file, You can obtain one at http://mozilla.org/MPL/2.0/.

-->
<h1 class="small" ng-if="!isNew()">{{'product.title.editProduct' | translate}}</h1>
<h1 class="small" ng-if="isNew()">{{'product.title.newProduct' | translate}}</h1>

<div class="loading" ng-if="!product.slug && !isNew()"></div>
<form name="productForm" ng-show="product.slug || isNew()">
    <!--
      NOTE: We're using ng-show on the form and not ng-if because ng-if creates a new scope while ng-show does not, and
            we want to be able to address the form easily from the controller (i.e. $scope.productForm)
      -->

    <article class="entity">

        <!-- Title -->
        <h1>
            <input type="text"
                   class="title"
                   ng-model="localizedProduct.title"
                   placeholder="{{'product.placeholder.productTitle' | translate}}"
                   localized
                   required/>
        </h1>

        <!-- Description -->
        <div ng-if="!isNew()">
            <label>{{'product.misc.description' | translate}}</label>
            <textarea class="" rows="10" ng-model="localizedProduct.description" ck-editor localized/>
        </div>

        <!-- Images gallery -->
        <div class="block entity" ng-show="!isNew()">
            <h3>{{'image.title.images' | translate:getTranslationProperties()}}</h3>

            <upload-list id="'image-gallery'"></upload-list>

            <image-list entity="product"
                        sortable-options="getImagesSortableOptions()"
                        on-select-feature="selectFeatureImage(image)"
                        on-edit="editImage(image)"
                        on-remove="removeImage(image)">
            </image-list>

            <image-upload ng-if="!isNew()"
                          upload-uri="{{getImageUploadUri()}}"
                          drop-text="'upload.explanation.dropProduct' | translate:getTranslationProperties()"
                          target="image-gallery"
                          id="'image-gallery'">
            </image-upload>
        </div>

        <!-- Addons -->
        <div ng-if="addons.length > 0 && !isNew()">
            <addon-list addons="addons" entity="product" localized-entity="localizedProduct"/>
        </div>

    </article>

    <aside>

        <!-- Create / Update / Sale status buttons -->
        <div class="buttons">
            <div ng-if="isNew()">
                <!-- Create new product -->
                <div class="hasLoading">
                    <button ng-disabled="productForm.$invalid" ng-click="updateProduct()"
                            class="btn btn-large btn-primary">
                        {{'entity.action.create' | translate}}
                    </button>
                    <span ng-class="{'loading': isSaving}"></span>
                </div>
            </div>
            <div ng-if="!isNew()">
                <div ng-if="product.onShelf == undefined">
                    <div class="hasLoading">
                        <button ng-disabled="productForm.$invalid" ng-click="updateProduct()" class="btn btn-large">
                            {{'entity.action.save' | translate}}
                        </button>
                        <button ng-click="publishProduct()" class="btn btn-large btn-primary">
                            {{'entity.action.publish' | translate}}
                        </button>
                        <span ng-class="{'loading': isSaving}"></span>
                    </div>
                </div>
                <div ng-if="product.onShelf != undefined">
                    <div class="hasLoading">
                        <button ng-click="updateProduct()" class="btn btn-large btn-primary">
                            {{'entity.action.update' | translate}}
                        </button>
                        <span ng-class="{'loading': isSaving}"></span>
                    </div>
                    <div>
                        <span ng-class="{strong: product.onShelf}">
                            {{'product.status.onShelf' | translate}}
                        </span>
                        <switch-button ng-model="product.onShelf"></switch-button>
                        <span ng-class="{strong: !product.onShelf}">
                            {{'product.status.withdrawnFromSale' | translate}}
                        </span>
                    </div>
                </div>
                <!-- Publish / update product -->
            </div>
        </div>

        <p/>

        <!-- Permalink -->
        <div class="uri" ng-if="!isNew()">
            <a href="{{editedLocalePrefix}}/products/{{product.slug}}" target="_new">
                {{editedLocalePrefix}}/products/{{product.slug}}
            </a>
        </div>

        <!-- Delete button -->
        <div class="block delete" ng-if="!isNew()">
            <small class="click-me" ng-click="confirmDeletion()">{{'product.action.deleteProduct' | translate}}</small>
        </div>

        <!-- Product type selector -->
        <div class="block" ng-if="!isNew() && hasTypes">
            <h3>{{'product.type.title' | translate}}</h3>

            <div>
                <select name="type" ng-model="product.type" ng-options="type as types[type].name for type in keys(types)">
                    <option value="">{{'product.type.noType' | translate}}</option>
                </select>
            </div>
        </div>

        <!-- Variants -->
        <div class="block" ng-if="!isNew() && hasTypes && !!product.type">
            <h3>{{'product.variants.title'| translate}}</h3>

            <ul class="variants" ui-sortable ng-model="product._embedded.variants">
                <li class="hoverable variant" ng-repeat="variant in product._embedded.variants">
                    <div class="title">{{variant.title}}</div>
                    <div class="visible-when-hover">
                        <span class="link" ng-click="editVariant(variant)">{{'product.variants.edit'| translate}}</span>
                        <span class="link" ng-click="confirmDeletionOfVariant(variant)">{{'product.variants.delete'| translate}}</span>
                    </div>
                    <div>
                        <small>
                            <span ng-if="!!variant.price && types[product.type].variants.properties.indexOf('price') >= 0">
                                {{'product.variants.price' | translate}}: {{variant.price | money:mainCurrency}} {{mainCurrency}}
                            {{'product.taxes.' + taxesSettings.mode | translate}}</span>
                            <span ng-if="variant.stock >= 0 && types[product.type].variants.properties.indexOf('stock') >= 0">
                                {{'product.variants.stock' | translate}}: {{variant.stock}}</span>
                        </small>
                    </div>
                </li>
            </ul>

            <div>
                <button class="btn btn-small" ng-click="createVariant()">{{'product.variants.add'| translate}}</button>
            </div>
        </div>

        <!-- Page model selection -->
        <div class="block" ng-if="!isNew() && models.length > 0">
            <h3>{{'entity.title.model' | translate}}</h3>
            <select ng-model="product.model" ng-options="model.id as model.name for model in models">
                <option value="">{{'entity.misc.defaultModel' | translate}}</option>
            </select>
        </div>

        <!-- Collection selection -->
        <div class="block" ng-if="!isNew() && hasCollections && collections.length > 0">
            <h3>{{'product.title.collections' | translate}}</h3>
            <ul class="list unstyled">
                <li ng-repeat="collection in collections">
                    <input type="checkbox" ng-model="collection.hasProduct"/> {{collection.title}}
                </li>
            </ul>
        </div>

        <!-- Taxes -->
        <div class="block" ng-if="!isNew() && taxesSettings.vat.otherRates.length > 0">
            <h3>{{'product.taxes.title' | translate}}</h3>

            {{'product.taxes.vat' | translate}}

            <div>
                <!-- Rate selector only where there are other rates than the standard rate -->
                <select ng-model="product.vatRate"
                        ng-options="rate.id as ((rate.name || 'Rate at') + ' ' + (rate.value * 100).toFixed(2) + '%') for rate in taxesSettings.vat.otherRates"
                        ng-change="calculatePrices()">
                    <option value="">{{'product.taxes.standardRate' | translate}}
                        {{(taxesSettings.vat.defaultRate * 100).toFixed(2)}}%
                    </option>
                </select>
            </div>
        </div>

        <!-- Price -->
        <div class="block" ng-if="!isNew()">
            <h3>{{'product.misc.price' | translate}}</h3>

            <div class="money-wrapper">
                <money-amount
                        ng-model="product.price"
                        currency="{{mainCurrency}}"
                        suffix="{{'product.taxes.' + taxesSettings.mode | translate}}"/>
            </div>

            <!-- Taxes -->
            <div ng-show="taxesSettings.mode == 'incl'">
                <!-- Managed inclusively : display excl price -->
                <div ng-show="taxesSettings.vat.defaultRate !== 0 && product.price > 0">
                    <!-- TODO
                         - the calculus should be done in the controller, not directly here
                         - the formatting (decimals rounding + currency symbol) needs to be done in a directive,
                           similar to <money-amount> but that displays just the amount, not a input.
                         - the number of decimals displayed should be related to the currency set.
                           It's not necessarily 2 ;  See the money service
                      -->

                    <div class="after-money-amount">{{excl.toFixed(2)}} {{'product.taxes.excl' | translate}}</div>
                </div>
            </div>

            <div class="clearfix"></div>

            <div ng-if="taxesSettings.mode != 'incl'">
                <!-- Mannaged exclusively
                     TODO display incl price -->
            </div>
        </div>

        <!-- Weight -->
        <div class="block" ng-if="!isNew() && hasWeight">
            <h3>{{'product.misc.weight' | translate}}</h3>

            <div>
                <input type="text" placeholder="{{'product.misc.weight' | translate}}" ng-model="product.weight" /> {{weightUnit}}
            </div>
        </div>

        <!-- Stock -->
        <div class="block" ng-if="!isNew() && hasStock && (!product.type || types[product.type].variants.properties.indexOf('stock') < 0)">
            <h3>{{'product.misc.stock' | translate}}</h3>

            <div>
                <input type="text" placeholder="{{'product.placeholder.initialStock' | translate}}" ng-model="product.stock" />
            </div>
        </div>
    </aside>
</form>

<!-- Add variant modal -->
<script type="text/ng-template" id="createVariant.html">

    <div class="modal-header">
        <button type="button" class="close" ng-click="$dismiss()">&times;</button>
        <h3>{{'product.variants.add' | translate}}</h3>
    </div>
    <div class="modal-body">
        <form name="newVariant" novalidate>
            <div ng-repeat="feature in keys(types[product.type].features)" ng-form="subForm">
                <strong>{{types[product.type].features[feature].name}}</strong>

                <!-- key is free for user-->
                <div ng-if="keys(types[product.type].features[feature].keys).length == 0">
                    <input ng-model="variantToCreate.features[feature]"
                           type="text"
                           name="feature"
                           required />
                </div>

                <!-- keys are predefined -->
                <div ng-if="keys(types[product.type].features[feature].keys).length > 0">
                    <select ng-model="variantToCreate.features[feature]"
                            ng-options="key as value for (key, value) in getKeys(feature)"
                            name="feature"
                            required/>
                </div>

                <span ng-if="subForm.feature.$error.required && subForm.feature.$dirty">
                    {{'global.validation.required' | translate}}
                </span>
            </div>

        </form>

    </div>
    <div class="modal-footer">
        <button class="btn" ng-click="$dismiss()">
            {{'entity.action.cancel' | translate}}
        </button>

        <button class="btn btn-primary" ng-click="$close()" ng-disabled="newVariant.$invalid">
            {{'product.variants.create' | translate}}
        </button>
    </div>
</script>

<!-- Edit variant modal -->
<script type="text/ng-template" id="editVariant.html">
    <div class="modal-header">
        <button type="button" class="close" ng-click="$dismiss()">&times;</button>
        <h3>{{'product.variants.edition' | translate:getTranslationProperties()}}</h3>
    </div>
    <div class="modal-body">
        <form name="editVariant" novalidate>

            <!-- Price -->
            <div class="block" ng-if="types[product.type].variants.properties.indexOf('price') >= 0">
                <h3>{{'product.misc.price' | translate}}</h3>

                <div>
                    <money-amount ng-model="variant.price" placeholder="{{product.price}}" currency="{{mainCurrency}}"/>
                </div>
            </div>

            <!-- Stock -->
            <div class="block" ng-if="types[product.type].variants.properties.indexOf('stock') >= 0">
                <h3>{{'product.misc.stock' | translate}}</h3>

                <div>
                    <input type="text" placeholder="{{'product.placeholder.initialStock' | translate}}"
                           ng-model="variant.stock"/>
                </div>
            </div>

            <!-- Weight -->
            <div class="block" ng-if="types[product.type].variants.properties.indexOf('weight') >= 0">
                <h3>{{'product.misc.weight' | translate}}</h3>

                <div>
                    <input type="text" placeholder="{{product.weight}}" ng-model="variant.weight" /> {{weightUnit}}
                </div>
            </div>

            <!-- Addons -->
            <div class="entity" ng-if="variantAddons.length > 0">
                <div class="block" ng-repeat="group in variantAddons">
                    <h3>{{group.name}}</h3>

                    <p ng-if="group.text && group.text != ''">
                        {{group.text}}
                    </p>
                    <ul>
                        <li ng-repeat="addon in group.fields">
                            {{addon.definition.name}}

                            <addon definition="addon.definition"
                                   object="variant.addons[addon.index]"></addon>
                        </li>
                    </ul>
                </div>
            </div>
        </form>

    </div>
    <div class="modal-footer">
        <button class="btn" ng-click="$dismiss()">
            {{'entity.action.cancel' | translate}}
        </button>

        <button class="btn btn-primary" ng-click="$close()" ng-disabled="editVariant.$invalid">
            {{'product.variants.update' | translate}}
        </button>
    </div>
</script>
